<template>
  <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  <div class="survey_container">

    <div id="main" style="height:600px; width:520px" class="main">

    </div>
    <div id="main2" style="height:600px; width:620px" class="main2">

    </div>
  </div>

</template>

<script>
  import survey from "@/api/dashboard/survey";
  export default
  {
    name:"surveyStatistics",
    data()
    {
      return{
        surveyTitle:[],
        //满意度调查的各个题目title以及对应的题目的满意度
        surveyData:[],
        actData:[]
      }
    },
    methods:
    {
      draw()
      {
        let option = {
          title : {
            text: '用户对医院的满意度调查',
            subtext: '百分比',
            x:'center',
            y:"10"
          },
          tooltip : {
            trigger: 'item',
            formatter: "{b}的{a}: {c}% ({d}%)"
          },
          legend: {
            orient : 'vertical',
            x : 'left',
            data: this.surveyTitle
          },
          calculable : true,
          series : [
            {
              name:'好评率',
              type:'pie',
              radius : '55%',
              bottom:"10%",
              center: ['50%', '70%'],
              data: this.surveyData
            }
          ]
        };

        let option2 =
        {
          title : {
            text: '用户参与各项活动的人数统计',
            subtext: '整数',
            x:'center',
            y:"10"
          },
          tooltip :
          {
            trigger: 'axis',
            axisPointer:
            {
              type: 'shadow'
            }
          },
          //选项
          legend:
          {
            orient : 'vertical',
            x : 'left',
            data:['挂号人数','活动报名人数','医生排班人数','推荐人数'],
          },
          toolbox:
          {
            show : true,
            orient : 'vertical',
            y : 'center',
            feature :
            {
              mark : {show: true},
              magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
              restore : {show: true},//还原
              saveAsImage : {show: true}
            }
          },
          calculable : true,
          xAxis : [
            {
              type : 'category',
              data : ['周一','周二','周三','周四','周五','周六','周日']
            }
          ],
          yAxis : [
            {
              type : 'value',
              splitArea : {show : true}
            }
          ],
          grid: {
            y:140,
            x2:40
          },
          series : this.actData
        };

        let myChart = this.$echarts.init(document.getElementById('main'));
        myChart.setOption(option);

        let myChart2 = this.$echarts.init(document.getElementById('main2'));
        myChart2.setOption(option2);

        setTimeout(function ()
        {
          window.onresize = function ()
          {
            myChart.resize();
            myChart2.resize();
          }
        },200)
      },
      async getSurveyTitleList()
      {
        await survey.findSurveyTitle().then(response=>
        {
          if(response.code === 200)
          {
            this.surveyTitle = response.data.rows;
          }
        })
      },
      async getSurveyList()
      {
        await survey.findSurveyTitleAndValue().then(response=>
        {
          if(response.code === 200)
          {
            this.surveyData = response.data.rows;
          }
        })
      },

      async getActNumber()
      {
        await survey.findNumber().then(response=>
        {
          if(response.code === 200)
          {
            this.actData = response.data.rows;
          }
        })
      }
    },

    async mounted()
    {
      await this.getSurveyTitleList();
      await this.getSurveyList();
      await this.getActNumber();
      this.draw();
    },
  }
</script>

<style>
  .datePicker
  {

  }
  .main
  {
    margin-top: 40px;
    margin-left: 30px;
    height: 100%;
    width: 100%;
  }
  .main2
  {
    margin-top: 40px;
    height: 100%;
    width: 100%;
    margin-left: 80px;
  }
  .survey_container
  {
    margin-left: 40px;
    display: flex;
    /*border: #D3D3D9 solid 2px;*/
  }
</style>
